<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<jsp:include page="../ueditor.jsp"></jsp:include>
<%
	String path=request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta name="keyword" content="拖拽式表单设计器,Web Formbuilder,Formbuild,专业表单设计器,高级表单设计器,智能表单设计器,WEB表单设计器,web formdesign,formdesigner">
	<meta name="description" content="拖拽式表单设计器Formbuild是强大的在线WEB表单设计器，它通常在、OA系统、问卷调查系统、考试系统、等领域发挥着重要作用，你可以在此基础上任意修改使功能无限强大！">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="author" content="leipi.org">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Public/css/bootstrap/css/bootstrap.css?2024" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/Public/css/site.css?2024" />
	<%-- <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/zc/toastr.min.css"> --%>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/Public/js/jquery-1.7.2.min.js?2024"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/bootstrap/js/tests/vendor/jquery.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/bootstrap/dist/js/bootstrap.min.js"></script>
	<%-- <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/zc/toastr.min.js"></script> --%>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/Public/js/formbuild/leipi.form.build.core.js?2024"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/Public/js/formbuild/leipi.form.build.plugins.js?2024"></script>
	<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/Public/js/formbuild/bootstrap/js/bootstrap.min.js?2024"></script>
</head>

<style type="text/css">
	table.table-edit tr td{
		text-align:center;
		vertical-align:middle;
		font-size: 20px;
	}
	table.table-edit tr{border-bottom:1px white solid;}
	table.table-edit tr.title {
		background-color: #EAEAEA4D;
	}
	table.table-edit tr.title td{
		font-size: 30px;
	}
	/*input边框样式*/
	input{
		/*//设置输入框中字体的大小*/
		font-size:17px;
		/*//设置输入框的高度*/
		height:30px;
		/*//设置输入框的圆角的大小*/
		border-radius:10px;
		/*//设置输入框边框的粗细和颜色*/
		border:1px solid #c8cccf;
		/*//设置输入框中文字的颜色*/
		color:#986655;
		/*//将输入框点击的时候出现的边框去掉*/
		outline:0;
		/*//设置输入框中文字的位置*/
		text-align:center;
		/*//将输入框设置为块级元素*/
		/*//display:block;*/
	}
	/*边框颜色*/
	input[type="text"], input[type="password"], textarea {
		border: 1px solid #DEE4EA99;
	}
	/*去掉点击是出现的验证红框*/
	.focus, input:focus, select:focus, textarea:focus {
		outline: 1px solid #f000;
	}
  	/*初始化编辑器高度,默认320*/
	#edui1_iframeholder{
		height: 63vh !important
	}
	
	#components {
		min-height: 600px;
	}
	
	.form-horizontal .control-group {
		margin-bottom: 3px;
	}
	
	#target {
		min-height: 200px;
		border: 1px solid #ccc;
		padding: 5px;
	}
	
	#target .component {
		border: 1px solid #fff;
	}
	
	#temp {
		width: 500px;
		background: white;
		border: 1px dotted #ccc;
		border-radius: 10px;
	}
	
	.popover-content form {
		margin: 0 auto;
		width: 213px;
	}
	
	.popover-content form .btn {
		margin-right: 10px
	}
	
	#source {
		min-height: 500px;
	}
</style>
<body style="background-color: #ffffff;">
<div class="page-content-iframe">
	<div region="center" >
		<form id="fm">
			<table class="table-edit" width="100%" align="center">
				<tr class="title">
					<td>
						模板
						<div style="width: 200px;margin-top: -33px;margin-left: 80%;margin-right: 0px;">
							<input type="button" class="btn" id="click_event" value="表单设置"/>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" class="btn" onclick="history.go(-1)" value="返回">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="button" class="btn" onclick="save()" value="保存">
						</div>
					</td>
				</tr>
				<tr>
					<td>
						模板说明:
						<textarea type="text" id="title" name="title" placeholder="请输入模板说明" class="easyui-validatebox"  data-options="required:true" value="${template.title}" validType='g'
						style="font-size:17px;height:30px;border-radius:10px;border:1px solid #c8cccf;color:#986655;outline:0;width: 80%;">${template.title}</textarea>
						<input type="hidden" id="tid" name="tid" value="${template.tid}">
					</td>
				</tr>
				<tr>
					<td>
						模板名称:
						<textarea type="text" id="preHtml" name="preHtml" placeholder="请输入模板名称" class="easyui-validatebox"  data-options="required:true" value="${template.preHtml}" validType='preHtml'
						style="font-size:17px;height:30px;border-radius:10px;border:1px solid #c8cccf;color:#986655;outline:0;width: 80%;">${template.preHtml}</textarea>
					</td>
				</tr>
			</table>
			<div id="show_enent">
				<textarea id="html" name="html"></textarea>
			</div>
		</form>
	</div>
	<div  id="hidden_enent">
		<!-- ———————————————— -->
		<hr>
		<div class="container" style="margin-bottom: 50px;height: 50%;">
			<div class="row clearfix">
				<div class="span6">
					<div class="clearfix">
						<h4 style="margin-left: 45%;">模板 表单</h4>
						<hr>
						<div id="build">
							<form id="target" class="form-horizontal">
								<fieldset>
									<div id="legend" class="component" rel="popover" title="编辑属性" trigger="manual" data-content="
						                <form class='form'>
						                  <div class='controls'>
						                    <label class='control-label'>表单名称</label> <input type='text' id='orgvalue' placeholder='请输入表单名称'>
						                    <hr/>
						                    <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
						                  </div>
						                </form>">
										<input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name" />
										<!-- <legend class="leipiplugins-orgvalue" id="mName">点击填写表单名</legend> -->
									</div>
								</fieldset>
							</form>
						</div>
					</div>
					<!-- <input type="button" class="btn" onclick="save()" value="保存">&emsp;&emsp; -->
					<!-- <input type="button" class="btn" onclick="reset()" value="重置"> -->
				</div>
				<div class="span6">
					<h4>拖拽下面的控件到左侧</h4>
					<hr>
					<div class="tabbable">
						<ul class="nav nav-tabs" id="navtab">
							<li class="active"><a href="#1" data-toggle="tab">常用控件</a></li>
							<!-- <li class><a href="#2" data-toggle="tab">定制控件</a></li>-->
							<!-- <li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li>  -->
						</ul>
						<form class="form-horizontal" id="components">
							<fieldset>
								<div class="tab-content">
									<div class="tab-pane active" id="1">
										<!-- Text start -->
										<div class="control-group component" rel="popover" title="文本框控件" trigger="manual" data-content="
											<form class='form'>
											    <div class='controls'>
											      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
											      <hr/>
											      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
											    </div>
										  	</form>">
											<!-- Text -->
											<label class="control-label leipiplugins-orgname">文本框</label>
											<div class="controls">
												<input name="leipiNewField" type="text" placeholder="" title="文本框" value="" class="leipiplugins" leipiplugins="text" />
											</div>
										</div>
										<!-- Text end -->
									<!-- Textarea start -->
									<div class="control-group component" rel="popover" title="多行文本控件" trigger="manual" data-content="
										<form class='form'>
										    <div class='controls'>
										      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
										      <!-- <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'> -->
										      <hr/>
										      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
										    </div>
									  	</form>">
										<!-- Textarea -->
										<label class="control-label leipiplugins-orgname">多行文本框</label>
										<div class="controls">
											<div class="textarea">
												<textarea title="多行文本框" name="leipiNewField" class="leipiplugins" leipiplugins="textarea"></textarea>
											</div>
										</div>
									</div>
									<!-- Textarea end -->
									</div>
									<div class="tab-pane" id="2">
										<div class="control-group component" rel="popover" title="文件上传" trigger="manual" data-content="
						                  	<form class='form'>
							                    <div class='controls'>
							                      <label class='control-label'>控件名称</label> <input type='text' id='orgname' placeholder='必填项'>
							                      <hr/>
							                      <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
							                    </div>
						                  	</form>">
											<label class="control-label leipiplugins-orgname">文件上传</label>
											<!-- File Upload -->
											<div>
												<input type="file" name="leipiNewField" title="文件上传" class="leipiplugins" leipiplugins="uploadfile">
											</div>
										</div>
									</div>
									<div class="tab-pane" id="5">
										<textarea id="source" class="span6"></textarea>
									</div>
								</div>
							</fieldset>
						</form>
					</div>
					<!--tab-content-->
				</div>
				<!---tabbable-->
			</div>
			<!-- row -->
		</div>
		<!-- ———————————————— -->
	</div>
	
</div>
<script type="text/javascript">
	$(function(){ 
		$('#show_enent').show();  
		$('#hidden_enent').hide();  
		$('#click_event').click(function(){   
			if($('#hidden_enent').is(':hidden')){    
				$('#show_enent').hide(); 
				$('#hidden_enent').show();
				$('#click_event').val('模板内容'); 
			}else{    
				$('#show_enent').show();   
				$('#hidden_enent').hide();   
				$('#click_event').val('表单设置');  
			}  
		})
	})
</script>
<script type="text/javascript">
    var tid = $.trim($('#tid').val());

	ue.addListener("ready", function () {
		if(tid != null && tid != ""){
	        //赋值
	        $.ajax({
	            url: '/template/selectTemplateById.do' ,
	            type: 'post',
	            async:false,
	            dataType:'json',
	            data:"id="+tid,
	            success: function (data) {
	        		ue.setContent(data.html);
	            },
	        });
		}
    });

    //扩展validatebox，添加验证两次密码功能
    //密码验证
    $.extend($.fn.validatebox.defaults.rules, {
        preHtml: { //验证手机号
            validator: function(value, param){
                var success = false;
				var checkR=$.ajax({
                    async : false,
                    cache : false,
                    type : 'post',
                    url: '${pageContext.request.contextPath}/template/selectTemplateByExample.do',
                    data : {
                        preHtml:value
                    }
                }).responseText;
                var dataObj=eval("("+checkR+")");//转换为json对象
                if(tid != '' && tid != null){
                    if(dataObj.length == 1 && dataObj[0].tid == tid){
                        success= true;
                    }else if(dataObj.length == 0){
                        success= true;
                    }
                }else{
                    if(dataObj.length == 0){
                        success= true;
					}
				}
                return success==true;
            },
            message: '模板名称不能重复'
        },
		g: {// 验证不能包含空格
	        validator: function (value) {
	            return /(^\s+)|(\s+$)/g.test(value);
	        },
	        message: '输入内容不能包含空格 !'
	    },
    });
  //**************************************************************** 
  //* 名　　称：DataLength 
  //* 功    能：计算数据的长度 
  //* 入口参数：fData：需要计算的数据 
  //* 出口参数：返回fData的长度(Unicode长度为2，非Unicode长度为1) 
  //***************************************************************** 
    function DataLength(fData) 
    { 
        var intLength=0 
        for (var i=0;i<fData.length;i++) 
        { 
            if ((fData.charCodeAt(i) < 0) || (fData.charCodeAt(i) > 255)){
                //intLength=intLength+2 
                intLength=intLength+1 
            } 
            //else 
                //intLength=intLength+1    
        } 
        return intLength 
    } 
    function yz(){
    	var flg = false;
    	var title = $.trim($('#title').val());
    	var preHtml = $.trim($('#preHtml').val());
    	var intLengthTitle = DataLength(title);
    	var intLengthPreHtml = DataLength(preHtml);
    	if((title == null || title == "") || (preHtml == null || preHtml == "")){
    		toastr.warning("模板说明和模板名称不能为空！");
    	}else if(intLengthTitle < 40 && intLengthPreHtml < 20){
    		toastr.warning("模板说明少于40个汉字和模板名称少于20个汉字！");
    		flg  = true;
    	}else if(intLengthTitle < 40 && intLengthPreHtml >= 20){
    		toastr.warning("模板说明少于40个汉字！");
    		flg  = true;
    	}else if(intLengthTitle >= 40 && intLengthPreHtml < 20){
    		toastr.warning("模板名称少于20个汉字！");
    		flg  = true;
    	}else{
            $.ajax({
                type:'post',
                data:'preHtml='+preHtml,
                url: '${pageContext.request.contextPath}/template/selectTemplateByExample.do',
                dataType: 'JSON',
                async: false,
                success:function (data) {
                    if(data.length == 0){
                        flg  = true;
                    }else if(data.length == 1){
                        var ma = $.trim($('#tid').val());
                        if (ma == data[0].tid) {
                            flg  = true;
                        }else{
							toastr.warning("模板名称不能重复！");
                            flg = false;
                        }
                    }else{
						toastr.warning("模板名称不能重复！");
                        flg = false;
                    }
                }
            });
    	}
    	return flg;
    }
    
    function glInput(){
    	//ueditorUE 取值
        var data = ue.getContent();
        var idq = "<input id=\"tid\"";
        var idh = "\"/>";
        var id1 = data.split(idq);
        //alert(id1.length)
        if(id1.length > 1){
	        var id2 = id1[1].split(idh);
	        var id = id2[0];
	        var inputw =idq+id+idh;
	        var html = "";
	        var datai = data.split(inputw);
	        for (var i=0;i<datai.length;i++) {
	        	html = html + datai[i];
	        }
	        ue.setContent(html);
        }
    }
    

	var addFlg = false;
    function save() {
        if (addFlg ==true) {
            return false;
        }
        if (yz() ==false) {
            return false;
        }

        /* if ($("#fm").form("validate")==false) {
            return false;
        } */ 
        addFlg  =  true;
        //ueditorUE 取值
        var data = ue.getContent();

        //添加
        var  url = "${pageContext.request.contextPath}/template/insertTemplate.do";
		var title = "新增";
        if(tid != '' && tid != null){
            //修改
			url = "${pageContext.request.contextPath}/template/editTemplate.do";
            title = "修改";
		}
        var title1 = $.trim($('#title').val());
        var items = title1.split(" ");
        title1 = items.join("");
        $('#title').val(title1);
        
		glInput();
        
        //表单
        var form = document.getElementById("target");
    	var valuelist = form.leipiNewField;
		/*if ($(valuelist).length == 0) {
			addFlg  =  false
			toastr.warning("请选择表单控件！");
		} else {
			var array = new Array();
			//表单字段名
			for(var i = 0;i<$(valuelist).length;i++){
				//alert(valuelist[i].title)
				array.push($(valuelist)[i].title);
			}
			
		}*/
		var array = new Array();
		var arrayType = new Array();
		//表单字段名
		for(var i = 0;i<$(valuelist).length;i++){
			//alert(valuelist[i].title)
			//存放字段名称
			array.push($(valuelist)[i].title);
			//存放字段类型
			if ($(valuelist)[i].type == 'text') {
				//'1'代表文本框
				arrayType.push('1');
			} else if($(valuelist)[i].type == 'textarea'){
				//'2'代表多行文本框
				arrayType.push('2');
			}
		}
		var tremark = array.join(",");
		var tremark3 = arrayType.join(",");
        $.ajax({
            url: url ,
            type: 'post',
            data:$("#fm").serialize()+"&tremark="+tremark+"&tremark3="+tremark3,
            success: function (data) {
                if (data == 1) {
                	toastr.success(title+'成功')
					//$.messager.alert("系统提示",title+'成功');
					addFlg  =  false
                    setTimeout("go()",1000);
                } else {
                	toastr.error(title+'失败')
                    //$.messager.alert("系统提示",title+'失败');
                    addFlg  =  false
                }
            },
        });
    }
    function go(){
        window.history.go(-1);
    }
   
</script>
</body>
</html>
